﻿@model ChoiceTree.ViewModels.Decision

@{
    ViewBag.Title = "Index";
}

@section head{
    @Styles.Render("~/Content/design.css")
    @Styles.Render("~/Scripts/DynaTree/skin-vista/ui.dynatree.css")

   <style type="text/css">
      @* ul.dynatree-container {
      overflow: scroll;
      position: relative;
      width: 250px;
      };*@

      #result
      {
      }

    </style>

}

<h2>Designer</h2>

<!-- ko if: initialized -->
<div data-bind="dynatree: {}">
  <ul style="display:none" data-bind="template: { name: 'itemTmpl', foreach: items }"></ul>
</div>

<div id="result" name="result" data-bind="text: ko.toJSON(ViewModel)">
</div>
<!-- /ko -->

<!-- ko ifnot: initialized -->
<span>Loading...</span>
<!-- /ko -->

<script id="itemTmpl" type="text/html">
    <li data-bind="template: { beforeRemove: $parent.removeItem, afterAdd: $parent.addItem }">
        <span data-bind="text: name"></span>        
        <ul data-bind="template: { name: 'itemTmpl', foreach: children }"></ul>
    </li>
</script>

@section scripts{
    @Scripts.Render("~/Scripts/jquery.json-2.4.min.js")
    @Scripts.Render("~/Scripts/knockout-2.1.0.js")
    @Scripts.Render("~/Scripts/knockout.mapping-latest.js")
    @Scripts.Render("~/Scripts/jquery-ui-1.8.20.min.js")
    @Scripts.Render("~/Scripts/DynaTree/jquery.dynatree.min.js")

    
    <script type="text/javascript">
        var dataSmall = [
            { "id": 1, "name": "one", "children": []
            }];

            // Sample JSON to return for initialization
        var dataBig = [
            { "id": 1, "name": "one", "children": [
                { "id": 2, "name": "two", "children": [
                    { "id": 3, "name": "three", "children": [] },
                    { "id": 4, "name": "four", "children": [] }
                ]
                },
                { "id": 5, "name": "five", "children": [
                    { "id": 6, "name": "six", "children": [] },
                    { "id": 7, "name": "seven", "children": [] }
                ]
                }
            ]
            },
            { "id": 8, "name": "eight", "children": [
                { "id": 9, "name": "nine", "children": [
                    { "id": 10, "name": "ten", "children": [] },
                    { "id": 11, "name": "eleven", "children": [] }
                ]
                },
                { "id": 12, "name": "twelve", "children": [
                    { "id": 13, "name": "thirteen", "children": [] },
                    { "id": 14, "name": "fourteen", "children": [] }
                ]
                }
            ]
            },
            { "id": 15, "name": "fifteen", "children": [] }
            ];

            var ItemViewModel = function (data) {
                this.id = data.id;
                this.name = data.name;
                this.children = [];

                console.log("Created new item: " + data);

                for (var i = 0; i < data.children.length; i++) {
                    this.children.push(new ItemViewModel(data.children[i]));
                }
            };

            var ListViewModel = function () {
                var self = this;
                self.initialized = ko.observable(false);
                self.items = ko.observableArray([]);

                // Map the returned JSON to the View Model  
                ko.mapping.fromJS(dataBig, {}, self.items);
                self.initialized(true);

                self.removeItem = function (item) {
                    self.items.remove(item);
                }

                self.addItem = function (item) {

                }
            };

            var dataMappingOptions = {
                key: function (data) {
                    return data.id;
                },
                create: function (options) {
                    return new ItemViewModel(options.data);
                }
            };

            ko.bindingHandlers.dynatree = {
                update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
                    setTimeout(function () {
                        $(element).dynatree({
                            dnd: {
                                onDragStart: function (node) {
                                    /** This function MUST be defined to enable dragging for the tree.
                                    *  Return false to cancel dragging of node.
                                    */
                                    console.log("tree.onDragStart(%o)", node);
                                    return true;
                                },
                                onDragStop: function (node) {
                                    // This function is optional.
                                    console.log("tree.onDragStop(%o)", node);
                                },
                                autoExpandMS: 1000,
                                preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
                                onDragEnter: function (node, sourceNode) {
                                    /** sourceNode may be null for non-dynatree droppables.
                                    *  Return false to disallow dropping on node. In this case
                                    *  onDragOver and onDragLeave are not called.
                                    *  Return 'over', 'before, or 'after' to force a hitMode.
                                    *  Return ['before', 'after'] to restrict available hitModes.
                                    *  Any other return value will calc the hitMode from the cursor position.
                                    */
                                    console.log("tree.onDragEnter(%o, %o)", node, sourceNode);
                                    return true;
                                },
                                onDragOver: function (node, sourceNode, hitMode) {
                                    /** Return false to disallow dropping this node.
                                    *
                                    */
                                    console.log("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
                                    // Prevent dropping a parent below it's own child
                                    if (node.isDescendantOf(sourceNode)) {
                                        return false;
                                    }
                                    // Prohibit creating childs in non-folders (only sorting allowed)
                                    if (!node.data.isFolder && hitMode === "over") {
                                        return "after";
                                    }
                                },
                                onDrop: function (node, sourceNode, hitMode, ui, draggable) {
                                    /** This function MUST be defined to enable dropping of items on
                                    * the tree.
                                    */
                                    console.log("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
                                    sourceNode.move(node, hitMode);
                                    // expand the drop target
                                    //        sourceNode.expand(true);
                                },
                                onDragLeave: function (node, sourceNode) {
                                    /** Always called if onDragEnter was called.
                                    */
                                    console.log("tree.onDragLeave(%o, %o)", node, sourceNode);
                                }
                            }
                        });
                        console.log("Finished calling dynatree()");
                    }, 0);
                }
            };

            var ViewModel = new ListViewModel();
            ko.applyBindings(ViewModel);

    </script>
}